<template>
    <section>
        <DetailsHeader title="学生认证" class="mb-24"></DetailsHeader>

        <div class="page-card">
            <a-form :label-col="{
                style: {
                    width: '150px',
                }
            }" :model="form" ref="formRef">
                <div class="card-content">
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="姓名" name="realName" :rules="[{ required: true, message: '请输入真实姓名' }]">
                                <a-input v-model:value="form.realName" placeholder="请输入真实姓名" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="学历" name="education" :rules="[{ required: true, message: '请选择你的学历' }]">
                                <a-select ref="select" v-model:value="form.education" placeholder="请选择你的学历" allowClear>
                                    <a-select-option value="博士">博士</a-select-option>
                                    <a-select-option value="硕士">硕士</a-select-option>
                                    <a-select-option value="本科">本科</a-select-option>
                                    <a-select-option value="专科">专科</a-select-option>
                                    <a-select-option value="其他">其他</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="学校所在地" name="province" :rules="[{ required: true, message: '请选择学校所在地' }]">
                                <a-select ref="select" v-model:value="form.province" placeholder="请选择学校所在地" allowClear>
                                    <a-select-option :value="item" v-for="item in province">{{ item }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="学校" name="schoolName" :rules="[{ required: true, message: '请选择学校所在地' }]">
                                <a-select v-model:value="form.schoolName" show-search placeholder="请输入学校名称并选择"
                                    :options="options" :filter-option="filterOption"></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="学院" name="college" :rules="[{ required: true, message: '请输入你的学院' }]">
                                <a-input v-model:value="form.college" placeholder="请输入你的学院" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="专业" name="major" :rules="[{ required: true, message: '请输入你的专业' }]">
                                <a-input v-model:value="form.major" placeholder="请输入你的专业" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="认证方式" name="type" :rules="[{ required: true, message: '请选择认证方式' }]">
                                <a-radio-group v-model:value="form.type" name="radioGroup">
                                    <a-radio :value="2">校园邮箱</a-radio>
                                    <a-radio :value="1">学生证</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>

                        <a-col :span="24" v-if="form.type == 2">
                            <a-col :span="12">
                                <a-form-item label="邮箱" name="email" :rules="[{ required: true, validator: validStudentEmail }]">
                                    <a-input v-model:value="form.email" placeholder="请输入你的邮箱" />
                                </a-form-item>
                            </a-col>
                        </a-col>

                        <a-col :span="24" v-if="form.type == 2">
                            <a-col :span="12">
                                <a-form-item label="验证码" name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
                                    <div class="form-item-code">
                                        <a-input v-model:value="form.code" allowClear autocomplete="off" placeholder="验证码">
                                        </a-input>
                                        <a-button type="primary" :disabled="count != 0" class="get-code-btn"
                                            @click="sendCode()">{{
                                                count >
                                                0 ? count : '获取验证码' }} </a-button>
                                    </div>
                                </a-form-item>
                            </a-col>
                        </a-col>

                        <a-col :span="24" v-if="form.type == 1">
                            <a-form-item label="在校时间">
                                <a-range-picker v-model:value="form.year" picker="year" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24" v-if="form.type == 1">
                            <a-form-item label="学生证" name="studentCard" :rules="[{ required: true, message: '请上传学生证' }]">
                                <a-upload v-model:file-list="fileList" name="file" list-type="picture-card"
                                    :headers="headers" class="avatar-uploader" :action="uploadImgUrl"
                                    @change="handleChange">
                                    <div v-if="fileList.length < 1">
                                        <plus-outlined></plus-outlined>
                                        <div class="ant-upload-text">请上传学生证照片</div>
                                    </div>
                                </a-upload>
                                <span><info-circle-filled
                                        style="margin-right: 5px;" />请上传学生证信息页，需包含姓名、学号、证件有效期、学校名等信息。</span>
                            </a-form-item>
                        </a-col>

                    </a-row>
                </div>
            </a-form>
        </div>

        <div class="page-bottom">
            <a-checkbox
                v-model:checked="checked">同意真实性声明，本人确认以上信息都是完整的、真实及有效的，因未提供完整、真实及有效信息产生的一切法律后果及给GpuMall带来的损失由本人承担。</a-checkbox>
            <a-button type="primary" @click="nextStep" style="display:flex;align-item:center;"><svg-icon name="icon_release"
                    style="width:20px;height:20px;margin-right: 8px;color: #ffffff;" />提交申请</a-button>
        </div>

         <!-- geetest验证 -->
         <GeetestCaptcha ref="geetestCaptchaRef" @validate="handleValidate" />
    </section>
</template>

<script setup name="Account">
import { reactive, ref } from 'vue'
import {
    InfoCircleFilled,
    PlusOutlined
} from '@ant-design/icons-vue';
import { useCountDown } from "@/hooks/sys/useCountDown.js";
import { authGetCode } from 'api/modules/api.auth'
import { studentCertification } from 'api/modules/api.account'
import { XsyMessage } from '@/libs/util.toast'
import { province } from '@/assets/js/province.js'
import { School } from '@/assets/js/School.js'
import { validStudentEmail } from '@/libs/util.valid.js'
import { useRouter } from 'vue-router'
import { uploadImgUrl } from '@/api/server.js'
import dbUtils from "libs/util.strotage";
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import userInfoStore from '@/stores/userInfo.js'
import GeetestCaptcha from "@/components/common/GeetestCaptcha.vue";
import dayjs from 'dayjs';
const router = useRouter()
const { count, countDown } = useCountDown();

const form = ref({
    year: []
})

const options = ref(School.map(item => {
    return {
        label: item,
        value: item
    }
}))
// 搜索下拉高校名称
const filterOption = (input, option) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

// 完成图形验证
const GeetestResult = ref()
const handleValidate = (item) => {
    GeetestResult.value = item
    countDown(60, getCode)
}

// 点击发送验证码
const geetestCaptchaRef = ref(null)
function sendCode() {
    if (validStudentEmail('', form.value.email)) {
        geetestCaptchaRef.value.captcha.showCaptcha();
    } else {
        XsyMessage.warning('请输入正确的学生邮箱格式');
    }
}

// 调用发送验证码接口
const getCode = () => {
    const params = {
        scene: 'auth-student',
        account: form.value.email,
        type: 'email',
        ...GeetestResult.value
    }

    authGetCode(params).then(res => {
        (res.code == 0) && XsyMessage.success('发送成功')
    })
};

const formRef = ref()
const checked = ref(false)
const nextStep = () => {
    formRef.value.validateFields().then(() => {
        if (!checked.value) {
            XsyMessage.warning("请勾选协议")
            return
        }
        const params = {
            ...form.value,
            startYear: dayjs(form.value.year[0]).format('YYYY') || '',
            endYear: dayjs(form.value.year[1]).format('YYYY') || ''
        }
        studentCertification(params).then(res => {
            if (res.code == 0) {
                userInfoStore().getUserInfo().then(() => {
                    XsyMessage.success('提交成功')
                    router.push('/account')
                })
            }
        })
    })
}

// 上传图片
const fileList = ref([])
const headers = {
    'gm-session-id': dbUtils.get('token')
}

const handleChange = ({
    file,
    fileList,
}) => {
    if (file.status === 'error') {
   
    }
    if (file.status === 'done') {
        form.value.studentCard = file.response.data.url || ''
    }
};

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .form-item-code {
        position: relative;
        border-radius: 6px;

        .get-code-btn {
            position: absolute;
            top:1px;
            right: 1px;
            height: 30px;
            border-radius: 6px;
            border: none;
            font-size: 14px;
            z-index: 100;
        }
    }
}

.page-bottom {
    position: fixed;
    bottom: 0;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 10px 0px rgba(155, 174, 201, 0.40);
    width: calc(100% - 220px);
    min-height: 90px;
    padding: 24px;
    display: flex;
    justify-content: end;
    align-items: center;

    .tips {
        color: #FAAD14;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 16px;
    }
}

.avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>
